import { ChangeEvent, FC, useState } from 'react'
import useGetComponentInfo from '../hooks/useGetComponentInfo'

import styles from './Layers.module.scss'
import classNames from 'classnames'
import { Button, Input, message, Space } from 'antd'
import { useDispatch } from 'react-redux'
import { componentAction } from '../../../store/components-reducer'
import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons'
import { ComponentInfo } from '../../../store/components-reducer/types'
import SortableContainer from '../../../components/drag-sortable/SortableContainer'
import SortableItem from '../../../components/drag-sortable/SortableItem'

const Layers: FC = () => {
  const [changingTitleId, setChangingTitleId] = useState('')
  const dispatch = useDispatch()
  const { componentList, selectedId } = useGetComponentInfo()

  function handleTitleClick(id: string) {
    const curComp = componentList.find(c => c.fe_id === id)
    if (curComp && curComp.isHidden) {
      return message.info('不能选择隐藏组件')
    }

    if (id !== selectedId) {
      dispatch(componentAction.changeSelectedId(id))
      setChangingTitleId('')
      return
    }
    setChangingTitleId(id)
  }

  function handleChangeTitle(e: ChangeEvent<HTMLInputElement>) {
    const newTitle = e.target.value.trim()
    if (!newTitle) return
    if (!selectedId) return

    dispatch(componentAction.changeComponentTitle({ fe_id: selectedId, title: newTitle }))
  }

  function handleChangeHidden(component: ComponentInfo) {
    if (!component) return
    dispatch(componentAction.changeComponentHidden({ fe_id: component.fe_id, isHidden: !component.isHidden }))
  }

  function handleChangeLock(component: ComponentInfo) {
    if (!component) return
    dispatch(componentAction.toggleComponentLock(component.fe_id))
  }

  function handleDragEnd(oldIndex: number, newIndex: number) {
    dispatch(componentAction.moveComponent({ oldIndex, newIndex }))
  }

  return (
    <SortableContainer items={componentList.map(c => ({ ...c, id: c.fe_id }))} onDragEnd={handleDragEnd}>
      {componentList.map(c => {
        const { fe_id, title, isHidden, isLocked } = c

        const titleDefaultClassName = styles.title
        const selectedClassName = styles.selected
        const titleClassName = classNames({
          [titleDefaultClassName]: true,
          [selectedClassName]: selectedId === fe_id,
        })

        return (
          <SortableItem id={fe_id} key={fe_id}>
            <div className={styles.wrapper}>
              <div className={titleClassName} onClick={() => handleTitleClick(fe_id)}>
                {changingTitleId === fe_id && (
                  <Input
                    value={title}
                    onChange={handleChangeTitle}
                    onPressEnter={() => setChangingTitleId('')}
                    onBlur={() => setChangingTitleId('')}
                  />
                )}
                {changingTitleId !== fe_id && title}
              </div>
              <div className={styles.handler}>
                <Space>
                  <Button
                    className={!isHidden ? styles.btn : ''}
                    icon={<EyeInvisibleOutlined />}
                    type={isHidden ? 'primary' : 'text'}
                    shape="circle"
                    size="small"
                    onClick={() => handleChangeHidden(c)}
                  />
                  <Button
                    className={!isLocked ? styles.btn : ''}
                    icon={<LockOutlined />}
                    shape="circle"
                    size="small"
                    onClick={() => handleChangeLock(c)}
                    type={isLocked ? 'primary' : 'text'}
                  />
                </Space>
              </div>
            </div>
          </SortableItem>
        )
      })}
    </SortableContainer>
  )
}

export default Layers
